<template>
  <div>
    <!--    <div>-->
    <!--      <el-input-->
    <!--          size="small"-->
    <!--          class="addPosInput"-->
    <!--          placeholder="添加"-->
    <!--          suffix-icon="el-icon-plus"-->
    <!--          @keydown.enter.native="addPositions"-->
    <!--          v-model="pos.name">-->
    <!--      </el-input>-->
    <!--      <el-button-->
    <!--          size="small"          icon="el-icon-plus" type="primary" @click="addPosition">添加-->
    <!--      </el-button>-->
    <!--    </div>-->
    <div class="postMaMa">
      <el-table
          size="small"
          stripe
          border
          :data="linkList"
          style="width: 80%">
        <el-table-column
            prop="id"
            label="id"
            width="180">
        </el-table-column>
        <el-table-column
            prop="data"
            label="原网址"
            width="180">
        </el-table-column>
        <el-table-column
            prop="num"
            label="访问次数"
            width="100">
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="gmtCreate"-->
<!--            label="访问次数">-->
<!--        </el-table-column>-->

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="showEditView(scope.row)">编辑
            </el-button>
            <el-popover
                placement="right"
                width="500px"
                trigger="click">
              <UserLink style="background-color: #fffffc;width: 500px;"></UserLink>
              <el-button size="mini" slot="reference">可视化</el-button>
            </el-popover>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">删除
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="showQr=true,showQrcode(scope.row)">展示二维码
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--           组件布局，子组件名用逗号分隔-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <el-pagination
          background
          @current-change="currentChange"
          layout="sizes,prev, pager, next, jumper, ->, total"
          :page-sizes="[7, 14, 21, 28]"
          :page-size="size"
          :total="total">
      </el-pagination>

    </div>

    <el-dialog
        title="编辑信息"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <el-tag style="width: 66px">id</el-tag>
        <el-input type="text" v-model="updatePos.id" class="updatePosInput"></el-input>
      </div>
      <div>
        <el-tag>data</el-tag>
        <el-input type="text" v-model="updatePos.data" class="updatePosInput"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
    <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
  </span>
    </el-dialog>

    <div>
      <el-dialog :title=this.show.id :visible.sync="showQr" style="width: 600px;margin-left: 700px;margin-top: 100px">
        <vue-qr :text="this.show.link" :size="250" :logoSrc="logoSrc" colorDark="#4169E1" colorLight="#fff"></vue-qr>
      </el-dialog>
    </div>
<!--    <div>-->
<!--      <el-dialog-->

<!--          :visible.sync="userViews"-->

<!--          >-->
<!--        <UserLink style="background-color: #d7d5cd">日访问量、日增用户折线图</UserLink>-->
<!--      </el-dialog>-->
<!--    </div>-->
  </div>

</template>

<script>


import UserLink from "@/views/ChartPage/UserLink";

export default {
  name: '',
  components:{'UserLink':UserLink},
  data() {
    return {
      logoSrc: require('../../img/logo.jpg'),
      showQr: false,
      userViews: false,

      total: 0,//分页
      size: 0,
      currentPage:1,

      show: {
        id: '',
        link: ''
      },

      addLink: {
        id: 0,
        data: '',
        num: 0,
        gmtCreate: '',
        gmtModified: '',
        deleted: 0,
      },

      linkList: [],
      dialogVisible: false,

      updatePos: {
        id: '',
        data: '',
        loginNum: ''
      },
    }
  },
  methods: {

    currentChange(currentPage){     //翻页
      this.currentPage = currentPage;
      this.initPositions();
    },

    doUpdate() {    //编辑功能
      this.postRequest('/link/create', this.updatePos).then(resp => {
        this.$message.success(resp);
        if (resp) {
          this.initPositions();
          this.dialogVisible = false;
          this.$message.success(resp);
        }
        this.$message.success(resp);
        this.dialogVisible = false;
      });
    },

    showEditView(data) {
      this.updatePos = data;
      // Object.assign(this.updatePos,data);
      this.updatePos.loginNum = '';
      this.dialogVisible = true;
    },

    showVisitView(){
    // this.$alert('这是一段内容', '标题名称', {
    //     confirmButtonText: '确定',
    //     callback: action => {
    //         this.$message({
    //             type: 'info',
    //             message: `action: ${ action }`
    //         });
    //     }
    // });
    },
    showQrcode(data) {
      this.show.id = data.id;
      this.show.link = data.data;
    },
    handleDelete(data) {
      //这个data,name不用要
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.postRequest('/link/delete?id=' +data.id).then(resp => {
          if (resp) {
            this.initPositions();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    initPositions() {
      this.getRequest('/link/all/'+this.currentPage).then(resp => {
        if (resp) {
          this.linkList = resp.data.records;
          this.total = resp.data.total;
          this.size = resp.data.size;
        }
      })
    }
  },
  mounted() {
    this.initPositions();
  }

}
</script>

<style scoped>

.postMaMa {
  margin-top: 10px;
  margin-left: 350px;
}

.updatePosInput {
  width: 280px;
  margin-left: 8px;
}

</style>